<template>

    <m-table name="admin-account" :action="action" :search="search" :params="params" ref="table">
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="手机号" prop="phone" />
        <el-table-column label="角色" prop="roleName">
            <template slot-scope="row">{{ getRoleName(row.row.role) }}</template>
        </el-table-column>
        <el-table-column label="注册时间" prop="created"  />
        <el-table-column label="状态" prop="state">
            <el-link slot-scope="row"  @click="changeAccountState(row.row)" :type="row.row.state == 1 ? 'success' : 'danger' ">{{ getStateName(row.row.state) }}</el-link>
        </el-table-column>
        
        
    </m-table>

</template>

<script>
import request from '@/utils/request'
import { accountState } from '@/config/account'
export default {
    data() {
        return {
            states:accountState,
            search: [
                { icon: 'el-icon-mobile', type: 'like', name: 'name', label: '姓名', span: 4, value: '' },
                { icon: 'el-icon-mobile', type: 'like', name: 'phone', label: '电话', span: 4, value: '' },
                { icon: 'el-icon-mobile', type: 'select', name: 'role', label: '角色', span: 4, value: '' , data:[] }
            ],
            roles:[],
            action: { remove: true, edit: true, add: true, export: false },
            params: [
                { name: 'id', value: '', hide: true },
                { name: 'name', value: '', label: '姓名' , type:'string'},
                { name: 'phone', value: '', label: '手机号' , type:'string'},
                { name: 'pwd', value: '', label: '登录密码' , type:'string'},
                { name: 'state', value: '', label: '状态' , type:'select' , data:accountState},
                { name: 'role', value: '', label: '角色' , type:'apiSelect' , url:'admin/roles'},
            ],
        }
    },
    mounted(){
        this.loadRole()
    },
    methods:{
        async loadRole(){
            const res = await request.get(`admin/roles`)
            this.roles = res
            this.search[2].data = res
        },
        async changeAccountState(e){
            await request.post(`admin-account/setstate/${e.id}/${e.state}`)
            this.$message.success('操作成功')
            this.$refs.table.reload()
        },
        getStateName(e){
            try {
               return  this.states.find(x=>x.id == e).name
            } catch (error) {
                return '未知'
            }
        },
        getRoleName(e){
            try {
               return  this.roles.find(x=>x.id == e).name
            } catch (error) {
                return '未知'
            }
        }
    }
}
</script>